﻿

.menu {
    height: 40px;
    display: block;
    padding: 0px;
    width: 800px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto;
}

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .menu ul li {
            /* width and height of the menu items */
            /*float: left;
            overflow: hidden;
            position: relative;
            line-height: 40px;
            text-align: center;
            background: url(../images/line_nav.gif) right 0 no-repeat;
            float: left;
            height: 40px;
            line-height: 39px;
            font-size: 16px;
            padding-right: 1px;*/
        }

            .menu ul li a {
                /* must be postioned relative  */
                position: relative;
                display: block;
                width: 90px;
                height: 40px;
                font-family: "微软雅黑", "宋体";
                font-size: 12px;
                text-decoration: none;
                cursor: pointer;
            }

                .menu ul li a span {
                    /* all layers will be absolute positioned */
                    position: absolute;
                    left: 0;
                    width: 90px;
                }

                    .menu ul li a span.out {
                        top: 0px;
                        height: 40px;
                    }

                    .menu ul li a span.over,
                    .menu ul li a span.bg {
                        /* hide */
                        top: -40px;
                        height: 40px;
                    }

/** 1st example **/

#menu1 {
    background-color: #E8E8E8;
    background-image: url(../images/menu_bg.gif);
    background-repeat: repeat-x;
    background-position: 0px 0px;
}

    #menu1 ul li a {
        color: #000;
    }

        #menu1 ul li a span.over {
            color: #FFF;
        }

    #menu1 ul li span.bg {
        /* height of the menu items */
        height: 40px;
        background-image: url(../images/bg_over.gif);
        background-repeat: no-repeat;
        background-position: center center;
    }

/** 2nd example **/

#menu2 {
    /*background: #FDFDFD;*/
    /*background: url(../images/banner.gif) no-repeat 0 0px;*/
    color: #fff;
    width: 700px;
    float: right;
    padding-right: 10px;
}

    #menu2 ul li a {
        /*color: #FFFFFF;*/
    }

        #menu2 ul li a span.over {
            color: #FFF;
            background: url(../images/banner.gif) no-repeat 0px -46px;
        }

.mian-nav { background:url(../images/mainanvibg.png) no-repeat; width:700px; height:35px;padding:10px 5px; font-family:"微软雅黑";}
.mian-nav ul{ list-style-type:none; margin:0; padding:0}
.mian-nav ul li{float: left;list-style: none;width: 100px;
height:37px;display: block; text-align:center;}
.mian-nav ul li a{width: 100px;height:29px;display: block; padding-top:8px; font-size:14px; color:#888;  text-decoration:none;}
.mian-nav ul li a:hover{ background:url(../images/mainanvibg_02.png) no-repeat; color:#fff;}
.mian-nav ul li .frist:hover{ background:url(../images/mainanvi_01.png) no-repeat;}
.mian-nav ul li .last:hover { background:url(../images/mainanvibg_03.png) no-repeat}